<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
      .height25{
        width: 100%;
        height: 2.5rem;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
      }
      .user_box{
        width: 100%;
        margin-top: 0rem;
      }

      /***order_wl***/
      .order_wl{
        margin-top: 7rem;
      }
      .order_wl_pro{
        width: 100%;
        padding: 0.7rem 1.3rem;
        background: #fff;
        margin-bottom: 1rem;
      }
      .order_wl_pro_img{
        width: 7.6rem;
        float: left;
      }
      .order_wl_pro_txt{
        width: calc(100% - 7.6rem);
        float: left;
        padding: 0.6rem 0;
        padding-left: 0.6rem;
      }
      .order_wl_pro_txt h5{
      	font-size: 1.5rem;
      	letter-spacing: 1px;
      	color: #ff8000;
        line-height: 1;
        margin-bottom: 0.8rem;
      }
      .order_wl_pro_txt p{
        font-size: 1.3rem;
        color: #686868;
        line-height: 1;
        margin-bottom: 0.8rem;
      }
      .order_wl_pro_txt p span{
        color: #0090ff;
      }
      .order_wl_peo{
        padding: 1.5rem 1.3rem;
        background: #fff;
        position: relative;
        margin-bottom: 1rem;
      }
      .order_wl_peo>img{
        width: 4.1rem;
        float: left;
      }
      .order_wl_peos{
        width: calc(100% - 4.1rem);
        float: left;
        font-size: 1.4rem;
        color: #000;
        line-height: 1;
        padding-left: 1rem;
      }
      .order_wl_peos font{
        display: block;
        margin-bottom: 1rem;
        color: #686868;
      }
      .order_wl_peo>span{
        width: 1.75rem;
        position: absolute;
        top: 50%;
        right: 1.3rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      .order_wl_xx{
        width: 100%;
        padding: 1.3rem;
        background: #fff;
      }
      .order_wl_xx ul{
        position: relative;
        padding-left: 4rem;
        z-index: 2;
      }
      .order_wl_xx ul:before{
        content: '';
        width: 1px;
        height: calc(100% - 3.5rem);
        position: absolute;
        left: 1.88rem;
        top: 0.5rem;
        z-index: -1;
        background: #cdcdcd;
      }
      .order_wl_xx ul li{
        margin: 1.5rem 0;
        position: relative;
      }
      .order_wl_xx ul li p{
        font-size: 1.3rem;
        color: #333;
        margin-bottom: 0.4rem;
      }
      .order_wl_xx ul li span{
        font-size: 1.2rem;
        color: #999;
      }
      .order_wl_xx ul li font{
        width: 1.2rem;
        height: 1.2rem;
        background: #fff;
        position: absolute;
        top: 0.3rem;
        left: -2.7rem;
      }
      .order_wl_xx ul li font:before{
        content: '';
        width: 0.6rem;
        height: 0.6rem;
        background: #cdcdcd;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.3rem;
        margin-top: -0.3rem;
      }
      .order_wl_xx ul li:first-child p{
        color: #ff8000;
      }
      .order_wl_xx ul li:first-child span{
        color: #ff8000;
      }
      .order_wl_xx ul li:first-child font:before{
        background: #ff8000;
      }
      /***order_wl***/






    </style>
</head>
<body>
<div id="app">
  <div class="height25"></div>

  <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
    <a class="aui-pull-left aui-btn" onclick="goBack()">
        <img src="../../image/back.png">
    </a>
    <div class="aui-title">物流详情</div>
  </header>

  <div class="aui-refresh-content order_inner_box">
    <!--order_wl-->
    <div class="order_wl">
      <div class="order_wl_pro clearfix">
        <div class="order_wl_pro_img">
          <img src="../../image/user_order_product.jpg" width="100%">
        </div>
        <div class="order_wl_pro_txt">
          <h5>已签收</h5>
          <p>顺丰快递：3800066036130</p>
          <p>官方电话：<span>95338</span></p>
        </div>
      </div>

      <div class="order_wl_peo clearfix">
        <img src="../../image/order_wl_icon1.png">
        <div class="order_wl_peos">
          <font>派送员</font>
          杭州城西分部
        </div>
        <span><img src="../../image/order_wl_icon2.png" width="100%"></span>
      </div>

      <div class="order_wl_xx">
        <ul>
          <li>
            <p>【杭州市】浙江省杭州市丁桥派件员：崔亚齐18069842790正在为您派件</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>【杭州市】正在派送中，请您准备签收（派件人：李李，电话：18674001777）</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>【杭州市】快件到达 杭州西湖国力大酒店营业点</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>【杭州市】快件到达 杭州下沙中转场</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>【苏州市】已揽件</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>【苏州市】顺丰速运 已收取快件</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>订单打单完成</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>订单支付成功，等到仓库发货</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
          <li>
            <p>订单提交成功</p>
            <span>2018-10-15 07:48:59</<span>
            <font></font>
          </li>
        </ul>
      </div>

      </div>

    </div>
    <!--/order_wl
  <div class="">-->
  </div>

</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>

<script type="text/javascript">

  apiready = function(){
      setRefresh()
      new Vue({
          el:"#app",
          data:{

          },
          methods:{

          },
          mounted:function(){
              var that = this
              var token = $api.getStorage('token');                        //获取用户token
              var order_no = api.pageParam.order_detail      //获取订单编号
              var data = {
                 token:token,
                 order_no:order_no
              }
              Axios.post(window.Url.get_order_express, data).then(function(res){
                    console.log(JSON.stringify(res));
                    if(res.status==1){
                       console.log('有物流信息')
                    }
              })
          }
      })
  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }


  function goBack(){
    api.closeWin({

    });
  }


</script>
